<template>
  <div class="complex-chart">
    <complex-header :columns="columns"></complex-header>
    <div class="complex-main">
      <table class="complex-layout" cellspacing="0" cellpadding="0">
        <tr>
          <template v-for="(item, index) in columns">
            <td :key="index" v-if="item.type !== 'group'">
              <div :style="getStyle(item)">
                <chart-scale
                  v-if="item.type === 'scale'"
                  :option="item"
                  :range="range"
                  :ticks="ticks"
                ></chart-scale>
                <chart-label
                  v-if="item.type === 'label'"
                  :option="item"
                  :range="range"
                ></chart-label>
                <chart-count
                  v-if="item.type === 'count'"
                  :option="item"
                  :range="range"
                  :ticks="ticks"
                  @tooltip="onTooltipVisible"
                  @close="onTooltipHide"
                ></chart-count>
              </div>
            </td>
            <template v-else>
              <template v-for="(sub, subIndex) in item.children">
                <td :key="'sub' + subIndex">
                  <div :style="getStyle(sub)">
                    <chart-scale
                      v-if="sub.type === 'scale'"
                      :option="sub"
                      :range="range"
                      :ticks="ticks"
                    ></chart-scale>
                    <chart-label
                      v-if="sub.type === 'label'"
                      :option="sub"
                      :range="range"
                    ></chart-label>
                    <chart-count
                      v-if="sub.type === 'count'"
                      :option="sub"
                      :range="range"
                      :ticks="ticks"
                      @tooltip="onTooltipVisible"
                      @close="onTooltipHide"
                    ></chart-count>
                  </div>
                </td>
              </template>
            </template>
          </template>
        </tr>
      </table>
    </div>
    <div
      class="tooltip"
      v-show="visible"
      :style="{ left: ev.x + 10 + 'px', top: ev.y + 10 + 'px' }"
    >
      <div>
        <span>深度：{{ ev.depth }}</span>
      </div>
      <div>
        <span>{{ ev.name }}：{{ ev.value }}</span>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import ComplexHeader from "./ComplexHeader.vue";

import ChartLabel from "./charts/ChartLabel.vue";
import ChartScale from "./charts/ChartScale.vue";
import ChartCount from "./charts/ChartCount.vue";

const DEFAULT_COLUMN_WIDTH = 50;
@Component({
  name: "ComplexChart",
  components: {
    ComplexHeader,
    ChartLabel,
    ChartScale,
    ChartCount
  }
})
export default class ComplexChart extends Vue {
  private config!: ComplexChartConfig;
  private columns: Array<ComplexColumn> = [];
  private h: number = 1000;
  private range: [number, number] = [0, 0];

  private visible: boolean = false;

  private ticks: ComplexTickCconfig = {
    visible: false,
    formatStep: 200,
    step: 20,
    total: 0
  };

  private ev = {
    name: "",
    depth: 0,
    value: 0,
    x: 0,
    y: ""
  };

  setOptions(options: ComplexChartConfig) {
    this.config = options;
    this.columns = this.config.columns;
    this.h = this.config.height;
    this.range = this.config.range;

    const ticks: ComplexTickCconfig = {
      ...this.ticks,
      visible: this.config.ticks?.visible === true,
      step: 20
    };

    if (this.config.ticks?.formatStep && this.config.ticks?.formatStep > 0) {
      ticks.formatStep = this.config.ticks.formatStep;
    }

    if (this.config.ticks?.step && this.config.ticks.step > 0) {
      ticks.step = this.config.ticks.step;
    }

    if (this.config.ticks?.total && this.config.ticks?.total > 0) {
      ticks.total = this.config.ticks.total;
    } else {
      ticks.total = Math.ceil(
        (this.range[1] - this.range[0]) / (ticks.step || 20)
      );
    }

    this.ticks = ticks;
  }

  onTooltipVisible(data: any) {
    this.ev = data;
    this.visible = true;
  }

  onTooltipHide() {
    this.visible = false;
  }

  private getStyle(option: any) {
    return {
      width: (option.width || DEFAULT_COLUMN_WIDTH) + "px",
      height: this.h + "px"
    };
  }
}
</script>
<style lang="scss" scoped>
.complex-chart {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  .complex-layout {
    table-layout: flexed;
    td {
      border: 1px solid #000;
      border-top: none;
      border-right: none;
      &:last-child {
        border-right: 1px solid #000;
      }
    }
  }
  .tooltip {
    position: fixed;
    background-color: rgba($color: #000000, $alpha: 0.6);
    padding: 10px;
    color: #fff;
    border-style: solid;
    white-space: nowrap;
    z-index: 9999999;
    box-shadow: rgba(0, 0, 0, 0.2) 1px 2px 10px;
    transition: left 0.2s cubic-bezier(0.23, 1, 0.32, 1) 0s,
      top 0.2s cubic-bezier(0.23, 1, 0.32, 1);
    background-color: rgba(0, 0, 0, 0.7);
    border-width: 1px;
    border-radius: 4px;
    font-size: 14px;
    border-color: rgb(255, 255, 255);
    pointer-events: none;
  }
}
</style>
